<template>
    <div class="bgCover">
        <div class="bgCover-content">
            <div class="content-top">
                <div class="content-top-left">
                    <img :src="productDetail.showImg" alt />
                </div>
                <div class="content-top-right">
                    <div class="content-top-right-one">
                        <div>
                            <p>{{productDetail.projectName}}</p>
                            <p>{{productDetail.projectDescription}}</p>
                        </div>
                        <div>
                            <span>申购方式：摇号</span>
                        </div>
                    </div>
                    <ul class="content-top-right-two">
                        <li>
                            <span>销售价格:</span>
                            <span>{{productDetail.unitPrice}} {{virtualWalletName}}</span>
                        </li>
                        <li>
                            <span>销售总量:</span>
                            <span>{{productDetail.totalSalesAmount}} token</span>
                        </li>
                        <li>
                            <span>锁仓机制:</span>
                            <span>{{productDetail.lockedWarehouseStatus}}</span>
                        </li>
                        <li>
                            <span>申购下限:</span>
                            <span>{{productDetail.personalReservationBottomLimit}} token </span>
                        </li>
                        <li>
                            <span>申购上限:</span>
                            <span>{{productDetail.personalReservationTopLimit}} token</span>
                        </li>
                    </ul>
                    <div class="content-top-right-three">
                        <a :href="productDetail.officialWebsitePath">
                            <img src="../../assets/images/daxin/guanwang.png" alt />
                            <span>官网</span>
                        </a>
                        <a :href="productDetail.whitePaper">
                            <img src="../../assets/images/daxin/baipishu.png" alt />
                            <span>白皮书</span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- -- -->
            <div class="content-center">
                <div>
                    <contentCenter></contentCenter>
                </div>
            </div>
            <!-- -- -->
            <div class="content-bottom">
                <div class="title-type">项目详情</div>
                <div class="content-bottom-detail">
                    <div class="content-bottom-detail-one">项目详情</div>
                    <div class="content-bottom-detail-two">{{productDetail.projectIntroduction}}</div>
                    <div class="content-bottom-detail-three">
                        <ul class="list-title">
                            <li>发行总量</li>
                            <li>代币币种</li>
                            <li>私募发行价格</li>
                            <li>私募发行量</li>
                            <li>私募锁仓天数</li>
                            <li style="width:200px">私募日期</li>
                        </ul>
                        <ul class="list-title">
                            <li class="liBg">{{productDetail.issuanceTotalAmount}}</li>
                            <li class="liBg">{{productDetail.tokenType}}</li>
                            <li class="liBg">{{productDetail.privatePlacementPrice}}</li>
                            <li class="liBg">{{productDetail.privatePlacementNumber}}</li>
                            <li class="liBg">{{productDetail.privatePlacementLockTime}}</li>
                            <li style="width:200px" class="liBg">{{productDetail.privatePlacementDate}}</li>
                        </ul>
                    </div>
                    <div class="content-bottom-detail-one">代币分配比例及解锁时间</div>
                    <div class="content-bottom-detail-four">
                        <div id="main" style="width: 800px;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from "echarts";
import contentCenter from "./contentCenter";
// import { tokenTypeList,makeNewSettingDetails } from "../../api/api";
export default {
    data() {
        return {
            virtualWalletName:this.$route.query.virtualWalletName,
            productId:this.$route.query.id,//项目id
            productDetail:[],//项目详情
            typeList:[],//代币
            typeListName:[],//代币名字    
        };
    },
    created(){
        this.getTypeList();
        this.getActivityDetail();
        
    },
    components: {
        contentCenter
    },
    mounted() {
        this.initEchart();
    },
    methods: {
        // 获取代币分配
        getTypeList(){
            var params = {
                id:this.productId
            }
            tokenTypeList(params).then(res => {
                this.typeList = res.data.data
                this.typeList.forEach((item,i) => {
                     this.typeList[i].value = item.tokenTypeRate
                     this.typeList[i].name = item.tokenTypeName
                     this.typeListName.push(item.tokenTypeName)
                })
                this.initEchart();
            })
        },
        //获取活动详情
        getActivityDetail(){
            var params = {
                id:this.productId
            }
            makeNewSettingDetails(params).then(res => {
                // console.log(res.data.data)
                this.productDetail = res.data.data
            })
        },
        //初始化echart表格
        initEchart() {
            var myChart = echarts.init(document.getElementById("main"));
            app.title = "";
            var option = {
                tooltip: {
                    //提示框，可以在全局也可以在
                    trigger: "item", //提示框的样式
                    // formatter: "{a} <br/>{b}: {c} ({d}%)",
                    formatter: "{a} <br/>{b}: {d}%",
                    color: "#000", //提示框的背景色
                    textStyle: {
                        //提示的字体样式
                        color: "#fff"
                    }
                },
                legend: {
                    //图例
                    orient: "vertical", //图例的布局，竖直    horizontal为水平
                    itemWidth: 5, //图例的宽度
                    itemHeight: 5,
                    itemGap: 50,
                    selectedMode: false, //取消图例上的点击事件
                    x: "650px", //图例显示在右边
                    y: "30px", //图例显示在右边
                    data: this.typeListName,
                    textStyle: {
                        //图例文字的样式
                        color: [
                            "#1FE3DB",
                            "#9094C4",
                            "#00B8FA",
                            "#FFA043",
                            "#98A8CA",
                            "#FFCE23"
                        ], //文字颜色
                        fontSize: 12 //文字大小
                    }
                },
                series: [
                    {
                        name: "访问来源",
                        type: "pie", //环形图的type和饼图相同
                        radius: ["38%", "50%"], //饼图的半径，第一个为内半径，第二个为外半径
                        center: ["30%", "55%"],
                        avoidLabelOverlap: false,
                        color: [
                            "#1FE3DB",
                            "#9094C4",
                            "#00B8FA",
                            "#FFA043",
                            "#98A8CA",
                            "#FFCE23"
                        ],
                        labelLine: {
                            //设置延长线的长度
                            normal: {
                                length: 5, //设置延长线的长度
                                length2: 10 //设置第二段延长线的长度
                            }
                        },
                        label: {
                            normal: {
                                // formatter: '{d}%, {c} \n\n',
                                // formatter: "{per|{d}%} , {c|{c}}\n{hr|}\n{a|}", //这里最后另一行设置了一个空数据是为了能让延长线与hr线对接起来
                                formatter: "{per|{d}%}", //这里最后另一行设置了一个空数据是为了能让延长线与hr线对接起来
                                padding: [0, -10], //取消hr线跟延长线之间的间隙
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 20, //设置最后一行空数据高度，为了能让延长线与hr线对接起来
                                        align: "center"
                                    },
                                    hr: {
                                        //设置hr是为了让中间线能够自适应长度
                                        borderColor: "auto", //hr的颜色为auto时候会主动显示颜色的
                                        width: "105%",
                                        borderWidth: 0.5,
                                        height: 0.5
                                    },
                                    per: {
                                        //用百分比数据来调整下数字位置，显的好看些。如果不设置，formatter最后一行的空数据就不需要
                                        padding: [4, 0]
                                    }
                                }
                            },
                            emphasis: {
                                //选中时候的样式
                                show: true,
                                textStyle: {
                                    fontSize: "20",
                                    fontWeight: "bold"
                                }
                            }
                        }, //提示文字
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: this.typeList
                    }
                ]
            };
            myChart.setOption(option);
        }
    }
};
</script>
<style lang="less" scoped>
//标题
.title-type {
    width: 100%;
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: #f7f7fb;
    color: #2d2f56;
    font-size: 16px;
    font-weight: bold;
}
//列表
.list-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    .liBg {
        background-color: #f7f7fb;
        color: #2d2f56;
    }
    li {
        width: 16%;
        background-color: #739bff;
        color: #fff;
        padding: 12px 0;
        padding-left: 20px;
    }
}
// --
.bgCover {
    background: #fff;
    .bgCover-content {
        padding: 10px 0 0;
        margin: 0 auto;
        width: 1200px;
        .content-top {
            height: 220px;
            display: flex;
            justify-content: flex-start;
            .content-top-left {
                width: 20%;
                display: flex;
                justify-content: center;
                align-content: center;
                overflow: hidden;
            }
            .content-top-right {
                width: 80%;
                padding: 20px;
                box-sizing: border-box;
                box-shadow: 0 2px 5px 0px #e6e6e6;
                .content-top-right-one {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-bottom: 20px;
                    border-bottom: 1px solid #e6e6e6;
                    > div:first-child {
                        font-size: 14px;
                        color: #2d2f56;
                        p:first-child {
                            font-weight: bold;
                            font-size: 16px;
                            margin-bottom: 20px;
                        }
                    }
                    > div:last-child {
                        span {
                            border: 1px solid #b2bfff;
                            border-radius: 20px;
                            padding: 5px 10px;
                            font-size: 12px;
                            color: #6881ff;
                            background-color: #eff2ff;
                        }
                    }
                }
                .content-top-right-two {
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    > li {
                        width: 28%;
                        margin-top: 20px;
                        color: #2d2f56;
                        font-size: 14px;
                        span:first-child {
                            margin-right: 10px;
                            color: #8c979d;
                        }
                    }
                }
                .content-top-right-three {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin: 20px 0;
                    color: #2d2f56;
                    font-size: 12px;
                    >a{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        margin-right: 20px;
                    }
                    img {
                        margin-right: 10px;
                        width: 15px;
                    }
                    > span {
                        margin-right: 20px;
                    }
                }
            }
        }
        .content-center {
            margin-top: 30px;
            > div {
                box-shadow: 0 2px 5px 0px #e6e6e6;
            }
        }
        .content-bottom {
            margin: 30px 0;
            .content-bottom-detail {
                box-shadow: 0 2px 5px 0px #e6e6e6;
                padding: 20px;
                box-sizing: border-box;
                > div {
                    margin-bottom: 40px;
                }
                .content-bottom-detail-one {
                    color: #8c979d;
                    font-size: 14px;
                    font-weight: bold;
                }
                .content-bottom-detail-two {
                    color: #2d2f56;
                    font-size: 12px;
                    line-height: 25px;
                }
                .content-bottom-detail-three {
                    width: 75%;
                }
            }
        }
    }
}
</style>